<template>
  <div style="width: 100%;height: 100%;flex-direction: column;" class="fixed-row news-main">
    <div style="width: 60%">
      <h3 style="color: #c52d29;font-size: 24px;font-weight: bold;line-height: 60px">新闻中心</h3>
      <div style="border-bottom: 1px solid #DFDFDF;margin-bottom: 20px;margin-top: 10px"></div>
      <template v-if="!isShowDetail">
        <div class="xinwen-item fixed-row" style="align-items: flex-start;margin-bottom: 40px"
        v-for="item in xinwenArr" :key="item.id">
          <img :src="item.imageUrl" style="width: 250px;height: 145px;margin-right: 30px;border-radius: 10px">
          <div style="flex: 1;">
            <h3 style="font-size: 14px;margin-bottom: 5px;color: #464646">{{item.title}}</h3>
            <div style="margin-bottom: 15px;color: #9a9a9a;font-size: 14px" class="ql-editor" v-html="item.context.slice(0,100)"></div>
            <div class="fixed-row gengduo-btn">
              <el-button type="danger" @click="showDetail(item.context)">更多内容</el-button>
            </div>
          </div>
        </div>
        <div style="height: 20px"></div>
        <div style="display: flex; justify-content: center">
          <el-pagination
            background
            layout="sizes,prev,pager,next,jumper,total"
            :page-size="paging.pageSize"
            :page-sizes="[5,10, 20, 30, 40, 50, 100,500,1000]"
            :total="paging.total"
            @size-change="changeSize"
            @current-change="changeCurrent"
          />
        </div>
      </template>

      <template v-else>
        <div @click="toggleMode" style="cursor: pointer"><span class="iconfont icon-fanhui" style="margin-right: 5px"></span>返回</div>
        <div style="margin-top: 50px" class="ql-editor" v-html="xinwenDetail"></div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
const isShowDetail = ref(false)
import {getProductInfoList} from '~/api/newsCenter'
const paging = reactive({
  currentPage:1,
  pageSize:10,
  total:0
})
const xinwenArr = ref([])
const xinwenDetail = ref('')
function toggleMode(){
  isShowDetail.value = false
  xinwenDetail.value = ''
}
onMounted(()=>{
  getTableList()
})
function showDetail(detail){
  isShowDetail.value = true
  xinwenDetail.value = detail
}

async function getTableList(){
  const params = {
    current:paging.currentPage,
    size:paging.pageSize
  }
  const res = await getProductInfoList(params)
  if(res.code == 200){
    xinwenArr.value = res.data.records
    paging.total = res.data.total * 1
    console.log(xinwenArr.value,'xinwenArr.value')
  }
  else{
    xinwenArr.value = []
    paging.total = 0
  }
}

function changeSize(val){
  paging.pageSize = val
}

function changeCurrent(val){
  paging.currentPage = val
}
</script>

<style scoped lang="less">
  .gengduo-btn ::v-deep .el-button{
    padding: 15px 30px;
  }

  .fade-enter-from {
    opacity: 0;
  }

  /* 进入过程中的过渡状态（定义过渡属性） */
  .fade-enter-active {
    /* 过渡效果：opacity属性变化，持续0.5秒，缓动函数为ease */
    transition: opacity 0.5s ease;
  }

  /* 进入后的最终状态（不透明） */
  .fade-enter-to {
    opacity: 1;
  }
</style>
